<template>
  <div id="map" class="map-main"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 地图容器........
const map = ref(null);

onMounted(() => {
  // 初始化地图容器
  map.value = L.map('map', {
    // 参考坐标系
    crs: L.CRS.EPSG4326,
    // 不添加属性说明控件
    attributionControl: false,
    // 限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
  });

  // 设置范围(这里是厦门天卫)
  map.value.setView([24.62063, 118.052678], 10);

  // 矢量图+注记
  let mapTypes = ['vec_c', 'cva_c'];  
  // 影像图+注记
  let imgTypes = ['img_c', 'cia_c']; 
  
  // 天地图 token,要去天地图官网上面去申请
  let tdtToken = '5fb6e34680b9cda61fa583c064cbc0fd';

  // 矢量图层组，就是普通的那种2d图
  let vectorLayers = [];
  for(let i = 0, len = mapTypes.length; i < len; i++) {
    let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
    let layer = L.tileLayer(tdtUrl, {
      zoomOffset: 1,
      maxZoom:17,
      minZoom:3,
      noWrap: true,
      bounds: [[-90, -180], [90, 180]],
    });
    vectorLayers.push(layer);
  }

  // 影像图层组，就是卫星图层
  let imgLayers = [];
  for(let i = 0, len = imgTypes.length; i < len; i++) {
    let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${imgTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
    let layer = L.tileLayer(tdtUrl, {
      zoomOffset: 1,
      maxZoom:17,
      minZoom:3,
      noWrap: true,
      bounds: [[-90, -180], [90, 180]],
    });
    imgLayers.push(layer);
  }

  // 创建矢量图层组和影像图层组
  let vectorLayerGroup = L.layerGroup(vectorLayers);
  let imgLayerGroup = L.layerGroup(imgLayers);

  // 默认加载影像图层
  imgLayerGroup.addTo(map.value);

  // 图层切换控件
  let baseLayers = {
    "矢量图": vectorLayerGroup,
    "影像图": imgLayerGroup
  };

  L.control.layers(baseLayers).addTo(map.value);
});
</script>

<style lang="stylus" scoped>
.map-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #CCC;
}
</style>
